<template>
  <el-main class="md-content">
    <!-- <div class="img-container">
      <img :src="imgIcon" alt="#" />
    </div>-->
    <h2 class="title">{{ content.title }}</h2>
    <section class="markdown-body tl" v-html="content.data" v-hight v-if="content.show"></section>
    <section class="markdown-body tc" v-else>
      <el-icon>
        <data-analysis />
      </el-icon>
      <p class="tc">暂无数据</p>
    </section>
  </el-main>
</template>
<script>
import { defineComponent, reactive, ref } from "vue";
import converter from "@/utils/show-md";
import request from "@/request/index";
import "@/assets/github-markdown.css";
import { DataAnalysis } from "@element-plus/icons";

export default defineComponent({
  name: "detail-md",
  props: {
    blog: Object,
  },
  components: {
    DataAnalysis,
  },
  setup (props) {
    const { type, id } = props.blog;
    const imgIcon = ref('');
    const content = reactive({
      data: null,
      show: true,
      title: "",
    });

    request.get(`/blog/detail/file/${id}`, { id: id, type: type }).then((resp) => {
      if (resp.data && resp.data.sfiles && resp.data.sfiles.length > 0)      {
        converter.setOption("customDetailId", id);
        content.data = converter.makeHtml(resp.data.sfiles[0].data);
        content.title = resp.data.title;
        // let icons = resp.data.sfilesIcon;
        // if (icons && icons.length > 0)        {
        //   imgIcon.value = window.location.origin + `/bgmg/blog/detail/${id}/imageicons/${icons[0].name}`
        // } else        {
        //   imgIcon.value = require("../../assets/imgs/bird/bird-c1.png");
        // }
      } else      {
        content.data = null;
        content.show = false;
      }
    });

    return {
      content,
      imgIcon
    };
  },
});
</script>

<style lang="scss" scoped>
.md-content {
  padding: 15px 10px;
}
.md-content .title {
  text-align: center;
  color: #26a69a;
  padding: 15px 5px;
  font-size: 1.35rem;
  font-weight: 600;
}
.img-container {
  background: #e0f2f1;
}
.img-container img {
  opacity: 0.5;
}
.md-content .markdown-body {
  min-height: 75vh;
  font-size: 14px;
}
.markdown-body.tc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ccc;
  text-align: center;
}
.markdown-body > .el-icon {
  font-size: 60px;
}

.markdown-body ul {
  list-style: disc;
}
.markdown-body ul ul {
  list-style: circle;
}
.markdown-body li {
  display: list-item;
}
</style>
